{% extends 'user/base_self_site.html' %}

{% block ext_css %}
    {{ block.super }}
    <link type="text/css" rel="stylesheet" href="/static/user/css/article_site.css">
{% endblock %}

{% block article_or_list %}
    <div>
        {% csrf_token %}
        <h3 class="text-center" id="{{ article_obj.pk }}">{{ article_obj.title }}</h3>
        <div class=""></div>
        <div class="cont">
            {{ article_obj.content|safe }}
        </div>

        <div id="div_digg">
            <div class="diggit action">
                <span class="diggnum" id="digg_count">{{ article_obj.up_count }}</span>
            </div>
            <div class="buryit action">
                <span class="burynum" id="bury_count">{{ article_obj.down_count }}</span>
            </div>
            <div class="clear"></div>
            <div class="diggword" id="digg_tips" style="color: red;"></div>
        </div>

        <div class="clear"></div>

        <div class="comments">
            <p class="tree_btn">评论树</p>
            <div class="comment_tree">

            </div>

            <p>评论列表</p>
            <ul class="comment_list list-group">
                {% for comment in comments %}
                    <li class="list-group-item">
                        <div>
                            <a href=""># {{ forloop.counter }}楼</a>&nbsp;&nbsp;
                            {{ comment.create_time|date:"Y-m-d H:i" }}&nbsp;&nbsp;
                            <a href=""><span>{{ comment.user.username }}</span></a>
                            {% ifnotequal comment.user.username user.username %}
                                <a href="" class="pull-right">回复</a>
                            {% endifnotequal %}

                        </div>

                        {% if comment.parent_comment_id %}
                            <div class="pid_info well">
                                <p>
                                    {{ comment.parent_comment.user.username }}:{{ comment.parent_comment.content }}
                                </p>
                            </div>

                        {% endif %}

                        <div>
                            <p>{{ comment.content }}</p>
                        </div>
                    </li>
                {% endfor %}


            </ul>
            <p>发表评论</p>
            <p>昵称：<input type="text" disabled value="{{ user.username }}"></p>
            <p>评论内容：</p>
            <textarea name="" id="comment_content" cols="60" rows="10"></textarea>
            <p>
                <button class="btn btn-default comment_bt">提交评论</button>
            </p>
        </div>
    </div>
{% endblock %}

{% block ext_js %}
    <script src="/static/user/js/article_site.js"></script>
    <script>
        //评论列表请求
        $(".comment_bt").click(function () {
            var content = $("#comment_content").val();
            var article_id = $("#article-title")
            var pid = "";
            $.ajax({
                url: "/commenting/",
                type: "post",
                data: {
                    "pid": pid,
                    "content": content,
                    "article_id": "{{ article_obj.pk }}",
                    "csrfmiddlewaretoken": $("[name='csrfmiddlewaretoken']").val(),
                },
                success: function (data) {
                    var create_time = data.create_time;
                    var username = data.username;
                    var content = data.content;

                    var s = `<li class="list-group-item">
                        <div>
                            ${create_time}&nbsp;&nbsp;
                            <a href=""><span>${username}</span></a>

                        </div>
                        <div>
                            <p>${content}</p>
                        </div>
                    </li>`;

                    $("ul.comment_list").append(s);

                    $("#comment_content").val("");
                    pid = "";
                }
            })
        })

        //点赞请求
        $("#div_digg .action").click(function () {
            var is_up = $(this).hasClass('diggit');//如果是赞的图标，则值为true，反之为false

            $obj = $(this).children("span");

            $.ajax({
                url: "/prise_article/",
                type: "post",
                data: {
                    "is_up": is_up,
                    "article_id": "{{ article_obj.pk }}",
                    "nice": "nice",
                    "csrfmiddlewaretoken": $("[name='csrfmiddlewaretoken']").val(),
                },
                success: function (data) {
                    if (data.state) {
                        /*
                        * 方式一
                        * if (is_up){
                            var val = parseInt($("#digg_count").text());
                            $("#digg_count").text(val+1);
                        }
                        else {
                            var val = parseInt($("#bury_count").text());
                            $("#bury_count").text(val+1);
                        }
                        * */
                        //方式二
                        var val = $obj.text();
                        $obj.text(val + 1);


                    } else {
                        var val = data.is_handled ? "您已经推荐过！" : "您已经反对过！";
                        $("#digg_tips").html(val)

                        setTimeout(function () {
                            $("#digg_tips").html("")
                        }, 2000);
                    }
                }
            })
        })


        //评论树请求
        $.ajax({
            url: "/get_comment_tree/",
            type: "get",
            data: {
                "article_id": "{{ article_obj.pk }}",
            },
            success: function (comment_list) {
                console.log(comment_list);
                $.each(comment_list, function (index, comment_obj) {
                    var pk = comment_obj.pk;
                    var conten = comment_obj.content;
                    var parent_comment_id = comment_obj.parent_comment_id;
                    var s = '<div comment_id=' + pk + ' class="list-group-item"><span>' + conten + '</span></div>'
                    if (!parent_comment_id) {
                        $(".comment_tree").append(s);
                    } else {
                        $("[comment_id=" + parent_comment_id + "]").append(s);

                    }
                })

                $("#comment_content").val("");
            }
        })
    </script>
{% endblock %}